<template>
  <div class="main flex h-screen">
    <div class="w-full flex items-center justify-center p-8">
      <div class="w-full bg-white is-always-shadow" style="width: 600px">
        <div class="flex">
          <div class="main text-left text-white" style="width:45%; height: 50vh;">
            <div class="pt-16 px-8" style="width:100%; height: 100%;background-color: rgba(54,63,97,0.7);">
              <h3 class="text-xl font-bold">{{ tenantInfo.systemName }}</h3>
              <div class="pt-2">{{ tenantInfo.remark }}</div>
            </div>
          </div>
          <div class="px-8" style="width:55%; height: 50vh">
            <el-page-header class="pt-4" @back="$router.go(-1)"></el-page-header>
            <!--            <h3 class="text-xl font-bold text-left">请登录</h3>-->
            <el-menu class="mt-6" default-active="1" mode="horizontal">
              <el-menu-item index="1">修改密码</el-menu-item>
            </el-menu>
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="pt-2" size="large">
              <el-form-item prop="oldPassword">
                <el-input v-model="loginForm.oldPassword"
                          type="password"
                          show-password
                          placeholder="请输入旧密码"
                          prefix-icon="search"
                          clearable/>
              </el-form-item>
              <el-form-item prop="newPassword">
                <el-input v-model="loginForm.newPassword"
                          type="password"
                          show-password
                          prefix-icon="lock"
                          placeholder="请输入新密码"/>
              </el-form-item>
              <el-form-item prop="reNewPassword">
                <el-input v-model="loginForm.reNewPassword"
                          type="password"
                          show-password
                          prefix-icon="lock"
                          placeholder="请再次输入新密码"
                          @keyup.enter.native="submitForm"/>
              </el-form-item>
              <el-form-item>
                <el-button v-loading="loading" type="primary" class="w-full" @click="submitForm">修改密码</el-button>
              </el-form-item>
            </el-form>

          </div>
        </div>
      </div>
    </div>
    <div class="bottom-4 left-0 right-0 absolute text-white">©Copyright 2025 成都高新区一点繁星软件工作室</div>
  </div>
</template>

<script setup>
import {onMounted, onUnmounted, ref, reactive} from 'vue'
import {useRouter} from "vue-router";
import $message from '@/utils/message.js';
import $gm4 from '@/utils/gm-sm4.js';
import $apiService from '@/axios/api.js';
import {isPasswordStrong} from "@/utils/misc.js";

const $router = useRouter();
const tenantCode = localStorage.getItem('E-o-tenant-code')
let loading = ref(false)
const loginForm = ref({
  oldPassword: '',
  newPassword: '',
  reNewPassword: '',
})
let tenantInfo = ref({
  logo: "",
  remark: "",
  systemName: "",
})
const loginFormRef = ref(null);
const loginFormRules = reactive({
  oldPassword: [{required: true, message: '请输入旧密码', trigger: 'blur'}],
  newPassword: [
    {required: true, message: '请输入新密码', trigger: 'blur'},
    {validator: isPasswordStrong, trigger: 'blur'},
  ],
  reNewPassword: [{required: true, message: '请再次输入新密码', trigger: 'blur'}],
})

onMounted(() => {
  queryMyByCode()
});
onUnmounted(() => {
});

const queryMyByCode = () => {
  if (!tenantCode) return $message.error('请先确定登录租户Code')
  const params = {params: {tenantCode: tenantCode}}
  $apiService.queryMyByCode(params).then((res) => {
    tenantInfo.value = res.data.data.info
  })
}

const submitForm = () => {
  if (!loginFormRef) return
  const formEl = loginFormRef.value;
  formEl.validate((valid) => {
    if (!valid) return
    if (loginForm.value.newPassword !== loginForm.value.reNewPassword) {
      $message.warning('新密码填写不一致')
      return
    }
    // 准备参数
    loading = true
    const param = {
      data: {
        oldCredential: $gm4.encrypt(loginForm.value.oldPassword),
        newCredential: $gm4.encrypt(loginForm.value.newPassword),
      }
    }

    $apiService.updatePassword(param).then((res) => {
      $message.success('修改密码成功')
      $router.go(-1)
    }).catch(e => {
      console.log(e)
      $message.error(e.response.data.message)
    }).finally(() => {
      loading = false
    })
  })
}

</script>

<style scoped>
.main {
  /*background-image: url("@/assets/images/login-bg.jpeg");*/
  background-image: url("/login-bg.jpg");
  background-size: cover;
}

.is-always-shadow {
  box-shadow: var(--el-box-shadow-light);
}

.el-menu--horizontal {
  --el-menu-horizontal-height: 30px;
}

/* 可选的样式增强 */
</style>
